import React, { useEffect, useState } from "react"
import { Button, Col, Row, PageHeader, message, Tag, Empty, Pagination } from 'antd';
import GoodsItem from "../../components/GoodsItem"
import FoodItem from "../../components/FoodItem";
import {
    ShoppingCartOutlined
} from '@ant-design/icons';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { get } from "../../util/get"
import Cart from "../../components/Cart";
import style from './index.module.css'
// 用户查看商家的商品
export default function FoodsList() {
    const [store, setStore] = useState([]);
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(0)
    const [data, setData] = useState([])
    const [visible, setVisible] = useState(false);
    const location = useLocation()
    const navigate = useNavigate()
    const token = localStorage.getItem('TOKEN')
    const storeId = location.pathname.split('/')[2];
    useEffect(() => {
        get(`/shop/shop/info/${storeId}`, token).then(res => {
            // console.log(res);
            const {code,data,msg}= res.data
            if (code === 0) setStore(data)
            else message.error(msg);
            // console.log(data)
        })
    }, [])
    useEffect(() => {
        (async () => {
            const res = await get(`/product/product/list?shopId=${storeId}&page=${page}&limit=8`, token)
            // console.log(res);
            if (res.data.code === 0) {
                const { list, totalCount } = res.data.page
                setData(list)
                setTotal(totalCount)
            }
            else message.error(res.data.msg)
        })()
    }, [token, page, storeId])
    const onClose = () => {
        setVisible(false);
    };
    const renderEmpty = () => {
        return <Empty
            style={{ 'background': 'white', 'minHeight': '560px' }}
            image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
            imageStyle={{
                height: 400,
            }}
            description={
                <span>
                    暂时没有内容哦！
                </span>
            }
        >
        </Empty>

    }
    const renderGoods = () => {
        // console.log(store.status,'foodlist')
        return <Row gutter={[0, 16]} className={style.goodsList} style={{ 'minHeight': '560px' }}>
            {
                data.map(item =>
                    <Col span={6} key={item.id}>
                        <FoodItem storeStatus={store.status} data={item}></FoodItem>
                    </Col>
                )
            }
        </Row>
    }
    return (
        <>
            <PageHeader
                style={{ 'background': 'white' }}
                className="site-page-header"
                onBack={() => navigate(-1)}
                title={store.name}
                subTitle={<>
                    <span>{store.address}</span>
                    {store.status === 1 ? <Tag color="#4de900">营业中</Tag> : <Tag color="#fbb62e">打烊休息</Tag>}
                    <img src={store.image} width={60} alt={'store'}></img>
                </>}
            />
            {
                data.length === 0 ? renderEmpty() : renderGoods()
            }
            <div className={style.paginationline}>
                <Pagination
                    className={style.pagination}
                    current={page} defaultPageSize={8}
                    total={total} onChange={page => {
                        setPage(page);
                    }} />
            </div>
            <Button className={style.cart_button}
                type="primary"
                shape="circle"
                icon={<ShoppingCartOutlined />}
                size={'large'}
                onFocus={() => setVisible(true)}
            />
               {
                store.status===1&&<Cart onClose={onClose} visible={visible}></Cart>
               } 
        </>
    )
}